---
import type { ImageMetadata } from 'astro'

type MinMax = 'max' | 'min'
type WidthHeight = 'width' | 'height'
type Media = `${MinMax}-${WidthHeight}`
type MediaQuery = `(${Media}: ${number}px)`

type Props = {
    image: ImageMetadata,
    class?: string,
    mediaQuery: MediaQuery
}

const { image, mediaQuery } = Astro.props;
---

<picture>
    <source
        srcset={image.src}
        media={mediaQuery}
    />
    <img class={Astro.props.class} src='' alt='' />
</picture>
